<!DOCTYPE html>
<html>
<head>
    <title>日历表</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; justify-content: center; }
        .calendar { border-collapse: collapse; margin: 20px; }
        .calendar th, .calendar td { 
            border: 1px solid #ddd; 
            padding: 10px; 
            text-align: center; 
            width: 30px;
        }
        .calendar th { background-color: #f0f0f0; }
        .header { 
            display: flex; 
            align-items: center; 
            justify-content: space-between; 
            margin-bottom: 10px;
        }
        button { padding: 5px 10px; cursor: pointer; }
        .today { background-color: #a0d8ef; }

        input { 
            padding: 5px; 
            width: 80px; 
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <div class="header">
            <button onclick="changeMonth(-1)">上一月</button>
            <h2 id="month-year"></h2>
            <button onclick="changeMonth(1)">下一月</button>
        </div>
         <!-- 新增日期查询输入框 -->
         <div class="search-box">
            <input type="number" id="input-year" placeholder="年份" min="1900" max="2100">
            <input type="number" id="input-month" placeholder="月份" min="1" max="12">
            <button onclick="jumpToDate()">跳转</button>
        </div>

        <table class="calendar">
            <thead>
                <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
            </thead>
            <tbody id="days"></tbody>
        </table>
    </div>

    <script>
        let currentDate = new Date();

        function updateCalendar() {
            const monthYear = document.getElementById('month-year');
            const daysBody = document.getElementById('days');
            daysBody.innerHTML = '';

            // 设置标题
            monthYear.textContent = 
                `${currentDate.getFullYear()}年${currentDate.getMonth() + 1}月`;

            // 获取当月第一天和最后一天
            const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
            const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
            const startDay = firstDay.getDay(); // 0 (周日) 到 6 (周六)
            const totalDays = lastDay.getDate();

            // 生成日期表格
            let date = 1;
            for (let i = 0; i < 6; i++) { // 最多6行
                const row = document.createElement('tr');
                for (let j = 0; j < 7; j++) { // 7天
                    const cell = document.createElement('td');
                    if (i === 0 && j < startDay) {
                        cell.textContent = ''; // 首行空白
                    } else if (date > totalDays) {
                        break;
                    } else {
                        cell.textContent = date;
                        // 高亮今天
                        const today = new Date();
                        if (date === today.getDate() && 
                            currentDate.getMonth() === today.getMonth() && 
                            currentDate.getFullYear() === today.getFullYear()) {
                            cell.className = 'today';
                        }
                        date++;
                    }
                    row.appendChild(cell);
                }
                daysBody.appendChild(row);
                if (date > totalDays) break;
            }
        }

        function changeMonth(offset) {
            currentDate.setMonth(currentDate.getMonth() + offset);
            updateCalendar();
        }
         // 新增日期跳转功能
         function jumpToDate() {
            const year = parseInt(document.getElementById('input-year').value);
            const month = parseInt(document.getElementById('input-month').value) - 1; // 月份从0开始

            if (isNaN(year) || isNaN(month) || month < 0 || month > 11) {
                alert("请输入有效的年份（1900-2100）和月份（1-12）！");
                return;
            }

            currentDate = new Date(year, month);
            updateCalendar();
        }

        // 初始化
        updateCalendar();
    </script>
</body>
</html>